<!-- 联动管理页面 -->
<template>
	<view>
		<!-- #ifdef APP-PLUS || H5 -->
		<u-navbar height="60" bgColor="#0081ff">
			<view class="u-nav-slot margin-top-xl" slot="left">
			</view>
			<view slot="center" class="u-nav-slot" style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 20px; color: #FFFFFF;">联动管理</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<u-icon name="plus-circle" size="32" color="#ffffff" @tap="addLinkage()">
				</u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :autoBack="true" height="90" bgColor="#0081ff" leftIconSize="32" leftIconColor="#ffffff">
			<view class="u-nav-slot margin-top-xl flex" slot="left">
			</view>
			<view slot="center" class="u-nav-slot margin-top-xl "
				style="display: flex; flex-direction: column;align-iems: center;">
				<view style=" font-size: 16px;">联动管理</view>
			</view>
			<view class="u-nav-slot margin-top-xl flex" slot="right">
				<u-icon name="plus-circle" size="32" color="#ffffff" @tap="addLinkage()">
				</u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->

		<u-subsection :list="list" :current="current" bgColor="#0081ff" @change="sectionChange"></u-subsection>

		<view v-if="current == 0">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="快去添加你联动吧!体会不一样的控制!">
			</u-empty>
		</view>

		<view v-if="current == 1">
			<u-empty v-if="executeList" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
				text="快去添加你联动吧!体会不一样的控制!">
			</u-empty>
			<u-swipe-action class="t-swipe" :autoClose="true">
				<u-swipe-action-item v-for="(item,index) in executeList" :options="options" @click='click'
					:name="item.id" :show="true">
					<view class="swipe-action u-border-top u-border-bottom flex"
						@click="toEdit(item.numId,item.type,item.numName)">
						<view class="swipe-action__content">
							<text class="swipe-action__content__text">{{item.numName}}</text>
							<text class="swipe-action__content__text">{{item.type}}</text>
							<text class="swipe-action__content__text">{{item.buttonName}}</text>
							<text class="swipe-action__content__text">{{item.action == 1?'开':'关'}}</text>
							<text class="swipe-action__content__text"
								style="margin-left: 250rpx; color: #8DC63F;">{{item.number==null? '':item.number}}</text>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				executeList: null,
				isModel: true,
				list: ['点击', '监听'],
				current: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff0000',
					}
				}]
			}
		},
		onLoad: function(option) {
			//this.getDeviceList()
		},
		onShow() {
			if (this.current == 1) {
				this.getExecuteList()()
			} else {
				//this.getDeviceList()
			}

		},
		methods: {
			click(index) {
				let id = index.name
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除吗？',
					success: res => {
						if (res.confirm) {
							that.$http.request({
								url: 'app/execute/remove',
								method: 'GET',
								data: {
									'id': id,
								},
								success: (data) => {
									if (data.data && data.data.code == 0) {
										that.getExecuteList()
										that.show1 = false
									}
								}
							})
						}
					}
				})
			},

			//获取列表
			getExecuteList() {
				this.$http.request({
					url: 'app/execute/list',
					method: 'GET',
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.executeList = data.data.list
						}
					}
				})
			},
			sectionChange(index) {
				this.current = index;
				if (index == 1) {
					this.getExecuteList()
				}
			},
			addLinkage() {
				uni.navigateTo({
					url: 'addLinkage'
				})

			},
			toEdit(numId, type, name) {
				console.log(numId)
				uni.navigateTo({
					url: 'editLinkage?numId=' + numId + "&type=" + type + "&name=" + name
				})
			}
		}
	}
</script>

<style lang="scss">
	.t-swipe {
		margin: 10rpx;
	}

	.swipe-action {
		height: 120rpx;

		&__content {
			padding: 35rpx 0;

			&__text {
				font-size: 20px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}
</style>
